@import './variables.scss';

// 全局样式
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

// Element UI 样式覆盖
.el-table th {
  background-color: #f5f7fa;
}

.el-dialog__body {
  padding: 20px;
}

// 自定义样式
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
}

.progress-text {
  font-size: 12px;
  color: #606266;
}

// 通用类
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.full-height {
  height: 100vh;
}

.full-width {
  width: 100%;
}

// 间距类
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: $spacing-xs; }
.mb-2 { margin-bottom: $spacing-sm; }
.mb-3 { margin-bottom: $spacing-md; }
.mb-4 { margin-bottom: $spacing-lg; }
.mb-5 { margin-bottom: $spacing-xl; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: $spacing-xs; }
.mt-2 { margin-top: $spacing-sm; }
.mt-3 { margin-top: $spacing-md; }
.mt-4 { margin-top: $spacing-lg; }
.mt-5 { margin-top: $spacing-xl; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: $spacing-xs; }
.ml-2 { margin-left: $spacing-sm; }
.ml-3 { margin-left: $spacing-md; }
.ml-4 { margin-left: $spacing-lg; }
.ml-5 { margin-left: $spacing-xl; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: $spacing-xs; }
.mr-2 { margin-right: $spacing-sm; }
.mr-3 { margin-right: $spacing-md; }
.mr-4 { margin-right: $spacing-lg; }
.mr-5 { margin-right: $spacing-xl; }

// 布局类
.app-container {
  padding: $spacing-lg;
  background: $background-color;
  min-height: calc(100vh - #{$header-height});
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-lg;
  
  .title {
    font-size: $font-size-extra-large;
    font-weight: 500;
    color: $text-color-primary;
  }
}

.search-form {
  background: white;
  padding: $spacing-md;
  margin-bottom: $spacing-md;
  border-radius: 4px;
  box-shadow: $box-shadow-base;
  
  .el-form-item {
    margin-bottom: 0;
  }
}

.data-table {
  background: white;
  border-radius: 4px;
  box-shadow: $box-shadow-base;
}

// 状态标签样式
.status-tag {
  font-size: $font-size-small;
  
  &.online { color: $success-color; }
  &.offline { color: $info-color; }
  &.maintenance { color: $warning-color; }
  &.error { color: $danger-color; }
  
  &.pending { color: $info-color; }
  &.running { color: $warning-color; }
  &.completed { color: $success-color; }
  &.failed { color: $danger-color; }
  &.cancelled { color: $info-color; }
  
  &.active { color: $success-color; }
  &.inactive { color: $info-color; }
  &.locked { color: $danger-color; }
}

// 响应式
@media (max-width: 768px) {
  .app-container {
    padding: $spacing-md;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: $spacing-md;
  }
}